<template lang="html">
    <div class="live-room-page normal-table-page">
        <Card :dis-hover="true">
            <div slot="title" style="color: #1c2438;font-weight: 700;">
                <Button icon="chevron-left" type="ghost" style="margin-right:10px;" @click="goLiveProgram()">直播节目</Button>
                <Icon type="bookmark"></Icon> 直播间管理
            </div>
            <div slot="extra">

                <!-- <Input v-model="searchKey" class="search-input" icon="search" placeholder="标题、摘要或作者" style="width: 300px" @keydown.native.enter="doSearch"></Input>
                <Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button> -->

                <Button type="ghost" class="add-new-btn" icon="plus" @click="showModal = true" style="margin-top:5px;">新增</Button>
                <Button type="ghost"  class="add-new-btn" @click="goLiveRoomTypePage()" style="margin-top:5px;">直播间类型管理
                    <Icon type="chevron-right"></Icon>
                </Button>

            </div>
            <Table :columns="liveRoomTableColumns" :loading="pageLoading" ref="concertTable" border :data="liveRoomList"></Table>

            <!-- <transition name="fade">
                <div class="loading-cover" v-if="pageLoading">
                    <Spin fix size="large"></Spin>
                </div>
            </transition> -->
            <div class="page-ctrl"  v-if="pageCount">
                <Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="20">
                </Page>
            </div>
        </Card>
        <Modal :mask-closable="false" v-model="showModal" :title="selectData ? '编辑':'新增'" :loading="modalLoading" class-name="live-gift-modal" @on-ok="clickOK()">
            <Form :model="liveRoomForm" ref="liveRoomForm" :rules="liveRoomFormRules" >
                        <FormItem label="房间名称" prop="name">
                            <Input v-model="liveRoomForm.name" placeholder="请输入房间名称"></Input>
                        </FormItem>
                        <FormItem label="主播" prop="live_anchor_uuid">
                            <Select
                               v-model="liveRoomForm.live_anchor_uuid"
                               :disabled="liveAnchorList.length === 0" :transfer="true" :filterable="true">
                               <Option v-for="(anchor, index) in liveAnchorList" :value="anchor.uuid" :key="anchor.uuid">{{anchor.nickname}}</Option>
                           </Select>
                        </FormItem>
                        <FormItem label="房间类型" prop="live_room_type_uuid">
                            <Select
                               v-model="liveRoomForm.live_room_type_uuid"
                               :disabled="liveRoomTypeList.length === 0" :transfer="true" :filterable="true">
                               <Option v-for="(roomType, index) in liveRoomTypeList" :value="roomType.uuid" :key="roomType.uuid">{{roomType.type_name}}</Option>
                           </Select>
                        </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script src="./live-room.js">
</script>

<style lang="scss" >
</style>
